<template>
	<view class="content">
		<view class="item">
			<view class="name">姓名</view>
			<view class="right"><input type="text" v-model="form.studentname" placeholder="请输入姓名" /></view>
		</view>
		<view class="item">
			<view class="name">家长电话</view>
			<view class="right"><input type="number" v-model="form.matherphone" placeholder="请输入家长电话" /></view>
		</view>
		<view class="item">
			<view class="name">登陆密码</view>
			<view class="right"><input type="number" v-model="form.password" placeholder="请输入登陆密码" /></view>
		</view>
		<view class="item">
			<view class="name">出生日期</view>
			<view class="right">
				<picker mode="date" class="picker" :value="form.studentage" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{ date }}</view>
				</picker>
				<image class="icon_right" src="../../../static/teacher/right.png" mode="widthFix" />
			</view>
		</view>
		
		<view class="hr"></view>
		<view class="item">
			<view class="name">会员卡类型</view>
			<view class="right">
				<picker class="picker" @change="bindCardPickerChange" :value="cardIndex" :range="cardList" :range-key="'cardName'">
					<view class="uni-input">{{ cardList[cardIndex]?cardList[cardIndex].cardName:'' }}</view>
				</picker>
				<image class="icon_right" src="../../../static/teacher/right.png" mode="widthFix" />
			</view>
		</view>
		<view class="item">
			<view class="name">课程</view>
			<view class="right">
				<picker class="picker" @change="bindCoursePickerChange" :value="courseIndex" :range="chooseCourseList" :range-key="'name'">
					<view class="uni-input">{{ chooseCourseList[courseIndex]? chooseCourseList[courseIndex].name : '' }}</view>
				</picker>
				<image class="icon_right" src="../../../static/teacher/right.png" mode="widthFix" />
			</view>
		</view>
		<view class="item">
			<view class="name">到期时间</view>
			<view class="right">
				<picker mode="date" class="picker" :value="form.datetime" :start="startDate" :end="endDate" @change="bindDateChange">
					<view class="uni-input">{{ date }}</view>
				</picker>
				<image class="icon_right" src="../../../static/teacher/right.png" mode="widthFix" />
			</view>
		</view>
		<view class="item">
			<view class="name">装备</view>
			<view class="right"><input type="text" v-model="form.giftequipment" placeholder="请输入装备" /></view>
		</view>
		<view class="item">
			<view class="name">学费</view>
			<view class="right"><input type="text" v-model="form.payment" placeholder="请输入学费" /></view>
		</view>
		<view class="item">
			<view class="name">家庭住址</view>
			<view class="right"><input type="text" v-model="form.address" placeholder="请输入家庭住址" /></view>
		</view>
		<view class="item">
			<view class="name">就读学校</view>
			<view class="right"><input type="text" v-model="form.school" placeholder="请输入就读学校" /></view>
		</view>
		<view class="item">
			<view class="name">备注</view>
			<view class="right"><input type="text" v-model="form.remark" placeholder="请输入备注" /></view>
		</view>
		
		<view class="btn" @click="handleSubmit">保存</view>
	</view>
</template>

<script>
import jcAddressPicker from '@/components/jc-address-picker/jc-address-picker.vue';
export default {
	components: { jcAddressPicker },
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			array: ['月卡', '季卡', '年卡'],
			storeArray: ['东门', '西门', '荣北街', '万玲阁'],
			storeIndex: 0,
			index: 0,
			date: currentDate,
			places: ['上海市', '市辖区', '黄浦区'],
			visible: false,
			level: 4,
			courseIndex: 0,
			chooseCourseList: [],
			cardIndex: 0,
			cardList: [],
			form: {
				studentname: '',
				studentage: '',
				fatherPhone: '',
				motherPhone: '',
				datetime: '',
				giftequipment: '',
				payment: '',
				cardtype: '',
				cardtypeName: '',
				address: '',
				school: '',
				remark: '',
				chooseCourse: ''
			}
		};
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	
	onLoad: function (option) {
		this.getCourse();
		this.getMemberCard();
	},
	
	methods: {
		/**
		 * 确定事件
		 */
		handleSubmit() {
			if (this.form.name == '') {
				this.$sys.showToast({
					title: '未输入姓名'
				});
				return;
			}

			if (!this.form.age >0) {
				this.$sys.showToast({
					title: '年龄不正确'
				});
				return;
			}

			if (!this.$util.regularPhone(this.form.fatherPhone)) {
				this.$sys.showToast({
					title: '父亲手机号输入不正确'
				});
				return;
			}
			if (!this.$util.regularPhone(this.form.motherPhone)) {
				this.$sys.showToast({
					title: '母亲手机号输入不正确'
				});
				return;
			}
			this.$sys.showToast({
				icon:"success",
				title: '可保存'
			});
			return;
			
			const teacher = uni.getStorageSync('teacher');
			uni.request({
				url: this.websiteUrl + '/app/saveStudent', 
				data: {
					'id': this.dataForm.id || undefined,
					'shopid': this.dataForm.shopid,
					'studentname': this.dataForm.studentname,
					'studentage': this.dataForm.studentage,
					'studentmather': this.dataForm.studentmather,
					'matherphone': this.dataForm.matherphone,
					'residualintegral': this.dataForm.residualintegral,
					'cardtype': this.dataForm.cardtype,
					'giftequipment': this.dataForm.giftequipment,
					'residualclasshour': this.dataForm.residualclasshour,
					'duetime': this.dataForm.duetime,
					'payment': this.dataForm.payment,
					'remark': this.dataForm.remark,
					'courseId': this.dataForm.chooseCourse,
					'address': this.dataForm.address,
					'school': this.dataForm.school,
					'password': this.dataForm.password
				},
				success: (res) => {
				}
			}); 
		},
		/**
		 * 地址选择器
		 * @param {Object} data
		 */
		change(data) {
			this.places = data.map(i => i.name);
		},
		/**
		 * 打开地址选择
		 */
		showAddress() {
			this.visible = true;
		},
		/**
		 * 日期选择
		 * @param {Object} e
		 */
		bindDateChange(e) {
			this.date = e.target.value;
		},
		/**
		 * 门店选择
		 * @param {Object} e
		 */
		bindPickerStoreChange(e) {
			this.storeIndex = e.target.value;
		},
		/**
		 * 会员卡选择
		 * @param {Object} e
		 */
		bindCoursePickerChange(e) {
			this.courseIndex = e.target.value;
		},
		bindCardPickerChange(e) {
			this.cardIndex = e.target.value;
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		// 查询会员卡状态
		getMemberCard () {
		  const teacher = uni.getStorageSync('teacher');
		  console.log(teacher)
		  uni.request({
		  	url: this.websiteUrl + 'app/getMemberCardApp', 
		  	data: {
		  		'shopid': teacher.shopId
		  	},
		  	success: (res) => {
		  		if(res.data.code==0){
		  			this.cardList = res.data.courseEntityList
		  		}
		  	}
		  }); 
		},
		// 根据店铺，查询可选课程
		getCourse () {
		  const teacher = uni.getStorageSync('teacher');
		  console.log(teacher)
		  uni.request({
		  	url: this.websiteUrl + 'app/getCourseApp', 
		  	data: {
				'shopid': teacher.shopId
			},
		  	success: (res) => {
				if(res.data.code==0){
					this.chooseCourseList = res.data.courseEntityList
				}
		  	}
		  }); 
		  
		},
	}
};
</script>

<style lang="scss">
.item {
	@extend .flex-space-between-center;

	min-height: 80rpx;
	flex-wrap: nowrap;
	.name {
		color: $text-color-three;
		font-size: $font-size-lg;
		font-size: 400;
		flex-shrink: 0;
	}
	.right {
		@extend .flex-space-between-center;
		justify-content: flex-end;
		color: $text-color-nine;
		width: 100%;
		height: 100%;
		margin-left: $base-interval;
		flex-shrink: 1;

		flex-wrap: nowrap;
		input {
			text-align: right;
			color: $text-color-three;
		}
		.avatar {
			width: 100rpx;
			border-radius: $border-radius-circle;
		}
		.icon_right {
			flex-shrink: 0;
			width: 10rpx;
			margin-left: $sm-interval;
		}
		.picker {
			width: 100%;
			height: 100%;
			flex-shrink: 1;
			margin-left: $base-interval;
			@extend .flex-space-between-center;
			justify-content: flex-end;
			.uni-input {
				height: 100%;
				text-align: right;
			}
		}
	}
	.right1 {
		height: 140rpx;
	}
}
.btn {
	@extend .global-button;
	margin: 150rpx auto 0px;
	width: 80%;
}
.hr {
	height: $sm-interval;
	background: #f8f9f9;
	margin: $sm-interval -1 * $base-interval;
}
</style>
